type TagProps = {
  children: React.ReactNode;
  closable?: boolean;
  onClose?: () => void;
};

export default function Tag({ children, closable = false, onClose }: TagProps) {
  return (
    <span className="bg-kq-600 px-2 p-1 rounded-sm text-white text-xs">
      {children}{' '}
      {closable && (
        <span
          className="cursor-pointer"
          onClick={() => {
            if (onClose) onClose();
          }}
        >
          ×
        </span>
      )}
    </span>
  );
}
